<template>
	<div class="common_tabs_container">
		<el-tabs tab-position="left" v-model="activeName" addable @tab-add="handleTabsAdded">
			<el-tab-pane v-for="(item, index) in dictData['SYS_CLASSIFY']" :key="index" :label="`${item.deName}分类`" :name="item.deValue" />
		</el-tabs>
		<sw-common-frame :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</template>
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="请输入类型名称" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table slot="table" :data="tableData" height="100%" stripe>
				<el-table-column label="排序" prop="orderBy" width="54" align="center"></el-table-column>
				<el-table-column label="类型名称" prop="name" min-width="320"></el-table-column>
				<el-table-column label="分类类型" min-width="100" :formatter="returnClassifyTypeName" />
				<el-table-column label="分类状态" width="160">
					<template slot-scope="{ row }">
						<el-switch v-model="row.status" active-value="1" inactive-value="2" @change="handleSwitchSatus($event, row)" />
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
				<el-table-column label="操作" width="132">
					<el-button-group slot-scope="{ row }">
						<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
					</el-button-group>
				</el-table-column>
			</el-table>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :type="activeName" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<enum-dialog v-model="enumDialog" :dict-id="dictId" @finish="handleUpdateData()"></enum-dialog>
	</div>
</template>

<script>
import Vue from 'vue';
import formDialog from './form';
import enumDialog from './enum';
import listMixins from '@/mixins/listMixins';
import { queryClassifyList, deleteClassify, updateClassify } from '@/api/basedata/sysClassify';
export default {
	mixins: [listMixins],
	enums: ['SYS_CLASSIFY'],
	components: { formDialog, enumDialog },
	data() {
		return {
			pageName: '分类',
			activeName: '1',
			enumDialog: false,
			dictId: ''
		};
	},
	computed: {
		listFunction() {
			return eval(queryClassifyList);
		},
		deleteFunction() {
			return eval(deleteClassify);
		},
		requestParams() {
			return { ...this.queryData, classType: this.activeName };
		}
	},
	watch: {
		activeName: {
			handler() {
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//返回分类类型名称
		returnClassifyTypeName(row) {
			let classType = row.classType;
			let classifys = this.dictData['SYS_CLASSIFY'];
			let info = classifys.find((item) => item.deValue === classType);
			return !info ? '' : `${info.deName}分类`;
		},

		//切换分类状态
		async handleSwitchSatus(value, data) {
			let params = { ...data, status: value };
			await updateClassify(params);
		},

		//添加标签页
		handleTabsAdded() {
			let dicts = this.dictData['SYS_CLASSIFY'];
			this.dictId = dicts[0].dictId;
			this.enumDialog = true;
		},

		//添加标签页完成
		handleUpdateData() {
			this.$store.dispatch('getEnumByCode', 'SYS_CLASSIFY').then((data) => {
				Vue.prototype.dictData[data.code] = data.value;
				this.$forceUpdate();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.system_classify_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	.el-tabs {
		border: none;
		flex-shrink: 0;
		box-shadow: none;
	}
	.el-tabs__content {
		display: none;
	}
}
</style>
